<template>
    <view class="item">
        <view class="item-img">
            <img :src="film.poster"  alt="" srcset="">
        </view>
        <view class="item-list">
            <view class="item-list-content title">{{ film.name }}</view>
            <view class="item-list-content" v-if="film.grade">观众评分：<text style="color: orange;font-size:12px">{{ film.grade }}</text></view>
            <view class="item-list-content actors">主演:{{  film.actors.map(item => item.name).join(" ") }} </view>
            <view class="item-list-content">中国大陆 | {{film.runtime}}分</view>
        </view>
        <view class="item-btn">
            <slot name="btn" :isPresale="film.isPresale">
                <!-- <button>购票</button> -->
            </slot>
        </view>
    </view>
  
</template>
<script>
export default {
    props:['film'],
    data() {
         return {

         }
    },
  
    methods:{
       
    }
}
</script>
<style scoped lang="scss">
.item {
    height: 110px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    &-img {
      height: 85px;
      width: 60px;
      img {
         height: 100%;
         width: 100%;
      }
    } 
    &-list {
        height: 85px;
        padding: 5px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex:1;
        padding-left: 10px;
        .title {
            font-size: 18px;
            font-weight: 700;
        }
        .actors {
            overflow-x: hidden;
            height: 20px;
            // text-emphasis: emphasis;
            // line-height: ;
        }
        &-content {

        } 
    } 
    &-btn {
        height: 85px;
        width: 50px;
        display: flex;
        align-items: center;
        button {
            width: 100%;
            height: 35%;
            background-color: #fff;
            border: 1px solid orange;
            color:orange
        }
    } 
}
</style>